<template>
	<view class="page-body">
        <view class="chat-list">
			<view class="chat-msg" @click="checkDec(item)" v-for="(item,index) in listData" :key="index">
				<view class="chat-head flex">
					<view class="chat-h3"><view class="dot" v-if="item.is_lookUp==0"></view> {{item.title}}</view>
					<view class="chat-time">{{item.add_time}}</view>
				</view>
				<view class="chat-cont flex">
					<view class="chat-cont-img">
						<image :src="item.goods_thumb"></image>
					</view>
					<view class="chat-cont-msg">
						<view class="p text_over2">{{item.describe}}</view>
						<view class="sub-p">{{item.order_sn}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="chat" v-for="(chat,index) in chatList" :key="index">
				<view class="row" @tap="toChat(chat)">
					<view class="left">
						<image :src="chat.face"></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="username">{{chat.username}}</view>
							<view class="time">{{chat.time}}</view>
						</view>
						<view class="bottom">
							<view class="msg">{{chat.msg}}</view>
							<view class="tis" v-if="chat.tisNum>0">{{chat.tisNum}}</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	var that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import defalut from '@/components/defalut.vue';
	import loadMore from '@/components/load-more.vue';
	import {pageLoad} from '@/utils/request.js';
	export default {
		data() {
			return {
				loadtype:1,
				listnull:false,
				winHeight:this.$store.state.winHeight,
				listData:[],
				page:1,
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onLoad() {
			that = this;
			this.getMsgList(true)
		},
		methods: {
			getMsgList(isReload){
				pageLoad({
					url:"/user/noticeList",
					that: that,
					isReload: isReload,
					data:{
					},
					success(res){
						uni.stopPullDownRefresh();
					}
				})
			},
			checkDec(row){
				let url="";
				let oid = row.order_id;
				let nid = row.id;
				let listData=this.listData;
				let itemindex=listData.findIndex((item,index)=>{
					return item.id==nid
				})
				this.listData[itemindex].is_lookUp=1;
				url="/pages/user/order_list/order/order_detail?oid="+oid+"&nid="+nid
				setTimeout(()=>{
					uni.navigateTo({
						url:url
					})
				},10)
				
			},
			toChat(chat){
				uni.navigateTo({
					url:"chat/chat?name="+chat.username
				})
			}
			
		},
		onUnload() {
			that = null;
		}
	}
</script>

<style  lang="scss">
	page{
		background-color:#f6f6f6;
	}
	.chat-msg{
		width: 700rpx; margin:0 auto; background: #fff;border-radius:20rpx; padding:20rpx; box-sizing: border-box; margin-top:20rpx;
		.chat-head{
			line-height: 70rpx; height: 70rpx;justify-content: space-between; display: flex;
			.chat-h3{font-size: 30rpx;color: #333;display: flex;align-items: center;}
			.dot{width: 10upx;height: 10upx;background: $maincolor;border-radius: 50%;margin-right: 6upx;}
			.chat-time{font-size: 26rpx;color: #bebebe;}
		}
		.chat-cont{
			display: flex;background: #fafafa; height: 150rpx;padding-right:10rpx; box-sizing:border-box;
			&-img{
				image{width: 150rpx;height: 150rpx;}
			}
			&-msg{
				margin-left:16rpx; padding-top: 10rpx; flex:1; box-sizing: border-box; 
				.p{font-size: 28upx;color: #555;}
				.sub-p{color: #bebebe;font-size: 24upx;padding-top:10upx;}
			}
		}
	}
	.chat-list{
		width: 94%;
		padding: 0 3%;
		.chat{
			width: 100%;
			height: 100upx;
			padding: 20upx 0;
			border-bottom: solid 1upx #eaeaea;
			.row{
				display: flex;
				justify-content: flex-start;
				.left{
					flex-shrink:0;
					width: 100upx;
					height: 100upx;
					image{
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
				}
				.right{
					flex-shrink:1;
					width: 98%;
					padding-left: 2%;
					.top{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.usernam{
							font-size: 26upx;
						}
						.time{
							font-size: 22upx;
							color: #bebebe;
						}
					}
					.bottom{
						width: 100%;
						height: 40upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.msg{
							font-size: 25upx;
							color: #777;
						}
						.tis{
							width: 35upx;
							height: 35upx;
							font-size: 22upx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #eb4d3d;
							color: #fff;
							border-radius: 100%;
						}
					}
				}
			}
		}
	}
</style>
